<template>
    <div>
        <div style="position:relative; padding-bottom: 60px; background: #ffffff;">
            <img src="../static/img/indexPageTop.jpg" style="width:100%; vertical-align:middle;"/>
            <div style="position:absolute; top:0; left:0; width:100%; height:100%;">
                <div style="color:#fff; text-align:center; font-size: 12px; width:100%; padding:10px 0;">商品及服务有金蜂星小米手机商城提供，仅支持信用卡分期支付。</div>
                <!-- 搜索 改！！！-->
                <!-- <s-search @search="search" :back="false"></s-search> -->
                <div style="padding: 0 20px; margin: 0 auto; text-align: center; position:relative;">
                    <input type="text" class="searchInput" placeholder="请输入关键词进行搜索" style="width: 100%; text-align: center; border: none; line-height: 2; padding: 5px; border-radius: 20px;" v-model="searchVal"/>
                    <van-icon name="search" size="20px" style="position: absolute; right: 35px; top: 9px;" @click="search"/>
                </div>
                <!-- 轮播图 advertType=1跳转地址 2-跳转页面-->
                <div style="padding:15px;">
                <van-swipe :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="item in advertList" :key="item.advertId">
                        <img v-if="item.advertType == 1" :src="'/images' + item.imagePath" alt="" srcset="" class="bannerImg" @click="toLink(item.activityUrl)">
                        <img v-if="item.advertType == 2" :src="'/images' + item.imagePath" alt="" srcset="" class="bannerImg" @click="$router.push('/goods/detail/'+item.activityUrl)">                        
                    </van-swipe-item>
                </van-swipe>
                </div>
            </div>
        </div>
        
        <!-- 分类 -->
        <!-- <van-tabs v-model="tabActive" :ellipsis="false" @click="tabsClick" >
            <van-tab v-for="item in shopGoodsCategoryList" :key="item.categoryId" :title="item.name"/>
        </van-tabs> -->
    
        <!-- 系统消息 （也是轮播） -->
        <!-- <div class="notification">
            <span class="van-icon van-icon-volume-o"></span>
            <van-swipe :autoplay="4000" :show-indicators="false" vertical>
                <van-swipe-item v-for="item in noticeList" :key="item.noticeId">
                    <router-link :to="`/notice/detail/${item.noticeId}`" >
                        <p class="van-ellipsis" >{{item.title}}</p>
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div> -->

        <!-- 十宫格 -->
        <div style="display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; padding: 20px 10px; background: #fff;">
            <div v-for="(item, index) in shopGoodsGroupList" v-bind:key="index" style="width:20%; text-align:center;" @click="goGroupList(item.groupId)">
                <img :src="'/images'+item.groupImage" fit="contain" style="width:45px; height:45px; margin-top:5px;">
                <!-- <img :src="item.imgSrc" style="width:45px; height:45px; margin-top:5px;"> -->
                <div style="margin:5px 0; color:#333333;">{{item.groupName}}</div>
            </div>
        </div>
        <!-- <div class="steamer">
            <img  src="https://img11.360buyimg.com/jdphoto/s640x100_jfs/t25471/63/982804166/2377/f8f633b9/5b850e48Nfd4e116b.png"/>
        </div> -->

        <!-- 图片模块分布排列 -->
        <div style="padding:15px; background:#fff; margin-top:15px;">
            <div style="display:flex; justify-content: center; align-items: center; flex-direction: row; margin-bottom:15px;">
                <div style="flex:1;" @click="$router.push('/goods/detail/' + tenLocationList1.goodsId)">
                    <img :src="'/images'+tenLocationList1.promotionImage" style="width:100%; padding-right:5px;">
                    <!-- <img src="../static/img/1.png" style="width:100%; padding-right:5px;"> -->
                </div>
                <div style="flex:1.08;">
                    <img :src="'/images'+tenLocationList2.promotionImage" style="width:100%; margin-bottom:5px;" @click="$router.push('/goods/detail/' + tenLocationList2.goodsId)">
                    <img :src="'/images'+tenLocationList3.promotionImage" style="width:100%;" @click="$router.push('/goods/detail/' + tenLocationList3.goodsId)">
                </div>
            </div>
            <img :src="'/images'+tenLocationList4.promotionImage" style="width:100%;" @click="$router.push('/goods/detail/' + tenLocationList4.goodsId)">
        </div>

        <div class="shopList">
            <div @click="$router.push('/goods/detail/' + tenLocationList5.goodsId)"><img :src="'/images'+tenLocationList5.promotionImage" style="width:100%; margin-bottom:10px;"></div>
            <van-row :gutter="10" ><!--组件components/shopCard.vue-->
                <van-col span="12">
                    <shop-card 
                        :goodsName="tenLocationList6.title" 
                        :shopImg="'/images' +  tenLocationList6.promotionImage"
                        :shopNameSub="tenLocationList6.simpleTitle"
                        :price="tenLocationList6.price"
                        :memberPrice="tenLocationList6.memberPrice"
                        :stageNum="tenLocationList6.stageNum"
                        :goodsId="tenLocationList6.goodsId"
                        :showSoldNum="tenLocationList6.showSoldNum"
                        ></shop-card>
                </van-col>
                <van-col span="12">
                    <shop-card 
                        :goodsName="tenLocationList7.title" 
                        :shopImg="'/images' +  tenLocationList7.promotionImage"
                        :shopNameSub="tenLocationList7.simpleTitle"
                        :price="tenLocationList7.price"
                        :memberPrice="tenLocationList7.memberPrice"
                        :stageNum="tenLocationList7.stageNum"
                        :goodsId="tenLocationList7.goodsId"
                        :showSoldNum="tenLocationList7.showSoldNum"
                        ></shop-card>
                </van-col>
            </van-row>
        </div>

        <div class="shopList">
            <div @click="$router.push('/goods/detail/' + tenLocationList8.goodsId)"><img :src="'/images'+tenLocationList8.promotionImage" style="width:100%; margin-bottom:10px;"></div>
            <van-row :gutter="10" ><!--组件components/shopCard.vue-->
                <van-col span="12">
                    <shop-card 
                        :goodsName="tenLocationList9.title" 
                        :shopImg="'/images' +  tenLocationList9.promotionImage"
                        :shopNameSub="tenLocationList9.simpleTitle"
                        :price="tenLocationList9.price"
                        :memberPrice="tenLocationList9.memberPrice"
                        :stageNum="tenLocationList9.stageNum"
                        :goodsId="tenLocationList9.goodsId"
                        :showSoldNum="tenLocationList9.showSoldNum"
                        ></shop-card>
                </van-col>
                <van-col span="12">
                    <shop-card 
                        :goodsName="tenLocationList10.title" 
                        :shopImg="'/images' +  tenLocationList10.promotionImage"
                        :shopNameSub="tenLocationList10.simpleTitle"
                        :price="tenLocationList10.price"
                        :memberPrice="tenLocationList10.memberPrice"
                        :stageNum="tenLocationList10.stageNum"
                        :goodsId="tenLocationList10.goodsId"
                        :showSoldNum="tenLocationList10.showSoldNum"
                        ></shop-card>
                </van-col>
            </van-row>
        </div>

        <!-- 商品推荐列表 -->
        <div class="shopList">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text=""
                @load="getShops"
            >
                <div v-for="item in shopList" :key="item.promotionTypeName">
                    <!-- 
                    <div class="gray-text">
                        <span class="gray-layout"><span class="gray-text-img"></span>{{item.promotionTypeName}}</span>
                    </div>
                    -->
                    <div class="subTitle">{{item.promotionTypeName}}</div><!--标题-->
                    <!-- <div><img src="../static/img/5.png" style="width:100%; margin-bottom:10px;"></div> -->
                    <van-row :gutter="10" ><!--组件components/shopCard.vue-->
                        <van-col span="12"  v-for="goods in item.shopGoodsPromotionVoList" :key="goods.goodsId + '' + goods.ggsId">
                            <shop-card 
                                :goodsName="goods.simpleTitle" 
                                :shopImg="'/images' +  goods.titleImage"
                                :price="goods.price"
                                :memberPrice="goods.memberPrice"
                                :stageNum="goods.stageNum"
                                :goodsId="goods.goodsId"
                                :showSoldNum="goods.showSoldNum"
                                ></shop-card>
                        </van-col>
                    </van-row>
                </div>
            </van-list>
        </div>

    </div>
</template>

<script>
    import shopCard from './../components/shopCard';
    import SSearch from './../components//SSearch';
    export default {
        name: 'index',
        data() {
            return {
                advertList: [], //  轮播图
                shopGoodsGroupList: [], // 十宫格
                noticeList: [], //消息
                shopGoodsCategoryList: [], //分类
                tenLocationList1: [], // 十个固定位置展示
                tenLocationList2: [], // 十个固定位置展示
                tenLocationList3: [], // 十个固定位置展示
                tenLocationList4: [], // 十个固定位置展示
                tenLocationList5: [], // 十个固定位置展示
                tenLocationList6: [], // 十个固定位置展示
                tenLocationList7: [], // 十个固定位置展示
                tenLocationList8: [], // 十个固定位置展示
                tenLocationList9: [], // 十个固定位置展示
                tenLocationList10: [], // 十个固定位置展示
                componentId: 0, // 模板id
                searchVal: '',
                tabActive: 0,

                pageNum: 0,
                total: -1,
                loading: false, //是否正在加载
                finished: false, //是否加载完了
                shopList: [],
            }
        },


        methods: {
            // 轮播图跳转地址
            toLink(link){
                window.localtion.href = link
            },
            search() {
                console.log(this.searchVal)
                this.$emit('search', this.searchVal);
                this.$router.push('/goods/list?keyword=' + this.searchVal);
            },
            getShops() {
                if (this.total !== -1 && this.pageNum >= this.total) {
                    this.finished = true;
                    return;
                }
                this.pageNum++;
                this.loading = true;
                this.$http.post('/shop/front/getGoodsPromotion', {pageSize:4, pageNum: this.pageNum}).then(res => {
                     this.loading = false;
                    if (res.status === 0) {
                        let data = res.data.rows || [];
                        console.log(data)
                        this.total = res.data.total;
                        if (this.pageNum == this.total || (this.pageNum == 1 && data.length == 0)){
                            this.finished = true;
                        }
                        this.shopList = this.shopList.concat(data);
                        console.log('推荐产品列表获取成功')
                        console.log(this.shopList)
                    } else {
                        // 请求失败
                        this.finished = true;
                        return;
                    }
                })
            },
            getDetail() {
                this.$http.post('/shop/front/index', {
                    token: this.$store.state.userInfo.token
                }).then(res => {
                    console.log('---获取商城首页数据成功-----')
                    console.log(res)
                    if (res.status === 0) {
                        this.advertList = res.data.advertVoList || []; // banner
                        this.shopGoodsGroupList = res.data.shopGoodsGroupList || []; //产品分组推荐列表[十宫格]
                        this.componentId = res.data.shopShopsComponent.componentId; // 店铺模板ID
                        localStorage.setItem('shopId', res.data.shopShopsComponent.shopId), // 店铺ID
                        this.shopGoodsCategoryList = res.data.shopGoodsCategoryList || [];
                        this.noticeList = res.data.msgNoticeList || [];
                        this.$nextTick(() => {
                            this.getGoodsPromotion()
                        })
                    }
                })
            },
            
            // 十宫格点击进入产品列表页
            goGroupList(groupId) {
                // this.$router.push('/goods/list?groupid=' + groupId);
                // 判断传入的分组id，新添加流量充值类别需要进行新的页面跳转（流量充值页面）
                if (groupId == 1) {
                    this.$router.push('/shopActivity/rechargeTraffic');
                } else {
                    this.$router.push('/goods/list?groupid=' + groupId);
                }
            },

            // 获取推荐产品--固定十个位置
            getGoodsPromotion() {
                this.$http.post('/shop/front/getGoodsPromotion', {
                    token: localStorage.getItem('token'),
                    componentId: this.componentId
                }).then(res => {
                    if (res.status === 0) {
                        console.log('获取推荐产品数据成功--十个固定位置')
                        console.log(res)
                        // this.tenLocationList = res.data || []
                        var getList = res.data
                        for (var i in getList) {
                            if (getList[i].indexRecommNum == 1) {
                                this.tenLocationList1 = getList[0]
                            } else if (getList[i].indexRecommNum == 2) {
                                this.tenLocationList2 = getList[1]        
                            } else if (getList[i].indexRecommNum == 3) {
                                this.tenLocationList3 = getList[2]
                            } else if (getList[i].indexRecommNum == 4) {
                                this.tenLocationList4 = getList[3]
                            } else if (getList[i].indexRecommNum == 5) {
                                this.tenLocationList5 = getList[4]
                            } else if (getList[i].indexRecommNum == 6) {
                                this.tenLocationList6 = getList[5]
                            } else if (getList[i].indexRecommNum == 7) {
                                this.tenLocationList7 = getList[6]
                            } else if (getList[i].indexRecommNum == 8) {
                                this.tenLocationList8 = getList[7]
                            } else if (getList[i].indexRecommNum == 9) {
                                this.tenLocationList9 = getList[8]
                            } else if (getList[i].indexRecommNum == 10) {
                                this.tenLocationList10 = getList[9]
                            }
                        }
                        console.log(this.tenLocationList5)
                    }
                })
            },
          
            getAdvert() {
                this.$http.post('/advert/advert/front/getAdvertList', {
                    advertPosId: 1
                }).then(res => {
                    if (res.status === 0) {
                        this.advertList = res.data;
                    } else {
                        this.$toast.fail(res.message);
                    }
                })
            },

            tabsClick(index) {
                let code = this.shopGoodsCategoryList[index].code;
                this.$router.push('/goods/list?code=' + code);
            }
        },

        components: { shopCard, SSearch },

        mounted(){
            // this.getAdvert();
            this.getDetail();
            console.log(localStorage.getItem('isPc'))
        }
    }
</script>

<style lang="scss" scoped>
    // 模板中给style设置一个scoped属性，意为该style的属性只对这个组件起作用，不会影响到其他组件中含有相同class的元素。
    @import './../assets/default.scss';
    img{vertical-align: middle;}
    /deep/ .van-tab { padding: 0 8px;}
    /deep/ .van-swipe{border-radius: 10px;}
    .bannerImg {
        // height: 162px;
        // min-height: 162px;
        // max-height: 162px;
        width: 100%;
        border-radius: 6px;
        touch-action: none;
    }
    
    .notification {
        $height: 50px;
        height: $height;
        display: flex;
        padding: 0 15px;
        background-color: #fff;
        > span {
            font-size: 18px;
            line-height: 50px;
            margin-right: 15px;
        }
        /deep/ a {
            color: #333;
        }
        p {
            height: 50px;
            line-height: 50px;
        }

        /deep/ .van-swipe  {
            flex: 1
        }
    }

    .steamer {
        height: 50px;
        width: 100%;
        margin-top: 15px;
        img {
            height: 100%;width: 100%;
        }
    }
    .shopList {
        padding: 0 8px;
        background: #fff;
        .subTitle{
            color: #363636;
            font-size: 16px;
            font-weight: bold;
            padding: 0 0 10px 7px;
        }
        .gray-text {
            position: relative;
            display: -webkit-box;
            margin: 14px 5px;
            color: #848689;
            font-size: 14px;
            -webkit-box-pack: center;
            &:after {
                content: "";
                height: 1px;
                width: 100%;
                position: absolute;
                top: 50%;
                left: 0;
                background-color: #cbcbcb;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }
            .gray-layout {
                padding: 0 10px;
                background-color: #f0f2f5;
                z-index: 10;
                position: relative;
                display: block;
                .gray-text-img {
                    background: url();
                    background-repeat: no-repeat;
                    background-size: 13px 13px;
                    width: 13px;
                    height: 13px;
                    display: block;
                    margin-right: 10px;
                    position: relative;
                    top: 5px;
                    float: left
                }
            }
        }
    }
    .warmText{
        padding: 10px;
        background: #376ca5;
        color: #fff;
        font-size: 12px;
    }
</style>
